const Path                 = require('path')
const HtmlWebpackPlugin    = require('html-webpack-plugin')
const webpack              = require('webpack')

//动态html生成
const HTMLCreate = (chunkname,title,...args) =>
	new HtmlWebpackPlugin({
		// 在splitChunks.chunks:all的时候，dev模式下的venders必须注入模板中(包含runtime逻辑，来自node_modules)
		// pro模式下vendors按需控制注入即可(vendor此时只包含第三方库，因为runtime内容已被runtimeChunk分离到"runtime"chunk中了)
		// common及runtime默认注入(当chunk不存在时HtmlWebpackPlugin会自动忽略)
		chunks:[chunkname,"common","runtime",...args],
		title:title,
		filename:`${chunkname}.html`,
		template:`./src/index.html`,
	})

module.exports={
	resolve:{
		alias:{
			// 配置常用路径,仅用于模块加载(import,require)
			pages:Path.resolve(__dirname,"src/pages"),
			assets:Path.resolve(__dirname,"src/assets"),
			common:Path.resolve(__dirname,"src/components/common"),
			components:Path.resolve(__dirname,"src/components"),
			untils:Path.resolve(__dirname,"src/untils")
		}
	},
	entry:{
		index:"./src/index.js"
		// 多入口，继续配置
	},
	output:{
		path:Path.resolve(__dirname,"dist"),
		publicPath:""
	},
	optimization: {
		// js公共模块,按需加载模块以及第三方库的提取
	    splitChunks: {
	    	// 分离出的chunks会被HtmlWebpackPlugin自动注入模板中
	    	// chunks:"all"--所有chunk; "initial"--所有入口(初始)依赖的公共模块或者第三方库；"async"--按需引入的模块(或称动态引入的模块)；可
	        minSize: 500,
	        minChunks: 2,
	        maxAsyncRequests: 5,
	        maxInitialRequests: 3,
	        automaticNameDelimiter: '~',
	        name: true,
	        // 以下的设置可以覆盖上述设置
	        cacheGroups: {
	        	// 第三方库提取
	        	// 提取的模块不能是es6语法，因为这部分不会被babel-loader处理，非现代浏览器下报错！！！
	        	// 如果该模块有非es6版本，加载非es6版本则解决问题
	        	// 如果需提取的模块只有es6版本，那只能把它从/node_modules/里拿出来
	        	// 放到/src/里再加载该模块，这时候它能被babel-loader处理，
	        	// 当然打包后它就不是在venders里了
	            vendors: {
	            	// [chunkname],需在html动态模板中手动注入
	            	name:"vendors",
	                test: /[\\/]node_modules[\\/]/,
	                // 第三方库，一旦被引用就被提取出来
	                minChunks: 1,
	                priority: -10,
	                reuseExistingChunk: true
	            },
	            // 公共模块提取
		        default: {
		        	// [chunkname],需在html动态模板中手动注入
		        	name:"common",
		        	// 只提取入口(初始)公共依赖模块,这里的设置覆盖掉了splitChunks.chunks的设置
		        	chunks:"all",
	                minChunks: 2,
	                priority: -20,	                
	            }
	        }
	    }
	},
	plugins:[
		// 自动注入模板并生成html,需放到带有提取功能的插件之前(例如：MiniCssExtractPlugin)，以便提取块的注入！！！！！！！！！！！
		HTMLCreate("index","index","vendors"),
		new webpack.ProvidePlugin({
				// 提供全局$,module中不需require()即可使用
				$:"jquery"
		    })
	],
	module:{
		rules:[
			{	
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					{
						loader:"file-loader",
						options:{
							name:"img/[name].[ext]"
						}
					}
				]
			},
			{
			    test: /\.js$/,
			    exclude: /(node_modules|bower_components)/,
			    use: {
			        loader: 'babel-loader',
			        options: {
			            presets: ['@babel/preset-env'],
			            plugins:["@babel/plugin-syntax-dynamic-import"]
			        }
			    }
			}
		]
	}
}